<template>
    <div class="p-grid p-fluid">
        <div class="p-col-12 flexbox-demo">
            <div class="card">
                <h4>API服务</h4>
                <p>为了更方便的为客户提供支持，我们已经完成对外API接口的开放，请参考<i>API文档</i>。</p>
            </div>
        </div>

        <div class="p-col-12 p-md-8">
            <div class="card">
                <h5>提示</h5>
                <p><i>app_id</i> 和 <i>secret_key</i>是您访问号卡系统 API 的密钥，具有该账户完全的权限，请您妥善保管。</p>

                <h5>app_id</h5>
                <InputText id="app_id" v-model="app_id" placeholder="" type="text" :disabled="true"/>

                <h5>secret_key</h5>
                <div class="p-inputgroup">
                    <InputText id="secret_key" v-model="secret_key" placeholder="" type="text"/>
                    <Button @click="reset" label="换一个"/>
                </div>

                <h5>IP白名单,多个用,隔开</h5>
                <Textarea v-model="ip_white" placeholder="如：127.0.0.1,168.172.0.2" :autoResize="true" rows="3"
                          cols="30"/>
                <div class="p-mb-4"></div>
                <Button  @click="updateApi" label="保存" class="p-col-4 p-mr-2 p-mb-2"></Button>
            </div>
        </div>




        <div class="p-col-12 p-md-4">
            <div class="card">
                <h5>接口功能预览</h5>
                <p><i>在线下单</i></p>
                <p><i>选号</i></p>
                <p><i>查询订单</i></p>
            </div>
        </div>

            <div class="card">
                <Dialog header="警告" :visible.sync="displayConfirmation" :style="{width: '350px'}" :modal="true">
                    <div class="confirmation-content">
                        <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
                        <span>你修改了secret_key，这将会导致之前的secret_key失效，所以确定修改吗?</span>
                    </div>
                    <template #footer>
                        <Button label="否" icon="pi pi-times" @click="closeModal" class="p-button-text"/>
                        <Button label="是" icon="pi pi-check" @click="postApi" class="p-button-text" autofocus />
                    </template>
                </Dialog>
            </div>

    </div>


    <!--    </div>-->


</template>



<script>
    import request from '@/utils/request'

    export default {
        data() {
            return {
                app_id: null,
                secret_key: null,
                ip_white: null,
                old_secret_key:null,
                displayConfirmation:false,
            }
        },
        mounted() {
            this.getInfo();
        },
        methods: {
            closeModal() {
                this.displayConfirmation = false;
            },
            reset() {
                let arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
                    num = "";
                for (let i = 0; i < 32; i++) {
                    num += arr[parseInt(Math.random() * 36)];
                }
                this.secret_key = num;
            },
            postApi()
            {
                this.displayConfirmation = false;
                request.post('/user/reset_api', {
                    secret_key: this.secret_key,
                    ip_white: this.ip_white
                })
                    .then(response => {
                        if (response.code === 20000) {
                            this.$toast.add({
                                severity: 'success',
                                summary: '提示',
                                detail: response.msg,
                                life: 3000
                            });
                            this.phone_code = null;
                        }

                    })
                    .catch(error => {
                        this.$toast.add({
                            severity: 'warn',
                            summary: '提示',
                            detail: '发生错误：' + JSON.stringify(error),
                            life: 3000
                        });
                    });
            },
            updateApi() {
                if(this.old_secret_key !== this.secret_key)
                {
                    this.displayConfirmation = true;
                    return;
                }
                this.postApi();
            },
            getInfo() {
                request.get('/user/info', {})
                    .then(response => {
                        if (response.code !== 20000) {
                            return;
                        }
                        this.app_id = response.data.id;
                        this.secret_key = response.data.secret_key;
                        this.old_secret_key = response.data.secret_key;
                        this.ip_white = response.data.ip_white;
                    })
                    .catch(error => {
                        console.log('出错：' + JSON.stringify(error));
                    });
            },
        }
    }
</script>


<style lang="scss" scoped>
    .p-d-flex > div,
    .box {
        background-color: var(--surface-e);
        text-align: center;
        padding: 1rem;
        border-radius: 4px;
        box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
    }

    .p-d-flex > div {
        width: 8rem;
    }

    i:not([class~="pi"]) {
        background-color: #ffffff;
        color: #2196f3;
        font-family: Monaco, courier, monospace;
        font-style: normal;
        font-size: 12px;
        padding: 2px 4px;
        letter-spacing: .5px;
        border-radius: 3px;
        font-weight: 600;
        margin: 0 2px;
    }

    /deep/ pre[class*="language-"] {
        &:before, &:after {
            display: none !important;
        }

        code {
            border-left: 10px solid var(--surface-d) !important;
            box-shadow: none !important;
            background: var(--surface-e) !important;
            margin: 1em 0;
            color: var(--text-color);
            font-size: 14px;

            .token {
                &.tag,
                &.keyword {
                    color: #2196F3 !important;
                }

                &.attr-name,
                &.attr-string {
                    color: #2196F3 !important;
                }

                &.attr-value {
                    color: #4CAF50 !important;
                }

                &.punctuation {
                    color: var(--text-color);
                }

                &.operator,
                &.string {
                    background: transparent;
                }
            }
        }
    }
</style>
